import {Input, Form, Button, message} from "antd";
import {fetchGetUserInfo} from "@/store/modules/user.jsx";
import {useDispatch, useSelector} from "react-redux";
import {useNavigate} from "react-router-dom";

export default function Login() {
    const navigate=useNavigate();

    const dispatch=useDispatch();
    const {token}=useSelector(state => state.userInfo)


    const onFinish=(values)=>{
        dispatch(fetchGetUserInfo(values))
        if (token){
            navigate('/')
            message.success('登录成功').then(r => {
                })
        }


    }

    return (
        <div>
            <h3>login</h3>
            <Form
                style={{
                    maxWidth:300
                }}
                onFinish={onFinish}
            >
                <Form.Item
                    label="用户名"
                    name="loginName"
                    rules={[
                        {
                            required: true,
                            message: '用户名不能为空!',
                        },
                    ]}
                >
                    <Input placeholder='请输入用户名' />
                </Form.Item>

                <Form.Item
                    label="密   码"
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: '密码不能为空!',
                        },
                    ]}
                >
                    <Input.Password  placeholder='请输入密码'  />
                </Form.Item>
                <Form.Item label={null}>
                    <Button type="primary" htmlType='submit'>
                        登录
                    </Button>
                </Form.Item>
            </Form>

            {token}

        </div>
    )

}

